<template>
  <div class="person-room">
    <div class="person-left" v-show="isShow">
      <div class="conter-box renkouqinkuan">
        <div class="conter-title"><span>人口概况</span></div>
        <div class="conter-detail">
          <ul>
            <li v-for="(item,index) in communityAll" :key="index">
              <span>{{ item.name }}</span>
              <span><strong>{{ item.value }}</strong></span>
            </li>
          </ul>

          <div class="special">
            <p class="teshurenqun">特殊人群</p>
            <ul>
              <li v-for="(item, index) in specialCrowd" :key="index">
                <span>{{ item.name }}</span>
                <span><strong>{{ item.value }}</strong></span>
              </li>
            </ul>
          </div>
          <div class="other-person">
            <div class="party">
              <p class="danyuanzhiyuanzhe">党员及自愿者</p>
              <ul>
                <li>
                  <span>中共党员</span>
                  <span><strong>{{ 141 }}</strong></span>
                </li>
                <li>
                  <span>志愿者</span>
                  <span><strong>{{ 245 }}</strong></span
                  >
                </li>
              </ul>
            </div>
            <div class="children">
              <p class="ertong">儿童</p>
              <ul>
                <!-- <li>
                  <span>学期儿童</span>
                  <span><strong>{{ 723 }}</strong></span>
                </li> -->
                <li>
                  <span>学龄前儿童</span>
                  <span><strong>{{ 423 }}</strong></span>
                </li>
                <li>
                  <span>入园学生</span>
                  <span><strong>{{ 457 }}</strong></span
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="conter-box yujingtixing" style="margin-top: 0.3rem">
        <div class="conter-title"><span>预警提醒</span></div>
        <div class="conter-detail">
          <p>
            <span @click="active_index=1" :class="{ active: active_index==1} ">空巢老人</span>
            <span @click="active_index=2"  :class="{ active: active_index==2} " >访客信息</span>
            <span @click="active_index=3"  :class="{ active: active_index==3} " >合租房</span>
          </p>
          <div class="bo-table" style="padding: 0 10px">
            <el-row type="flex" justify="space-between">
              <el-col :span="2">&nbsp;</el-col>
              <el-col :span="6">姓名</el-col>
              <el-col :span="8">居住地址</el-col>
              <el-col :span="6">未出门天数</el-col>
            </el-row>
            <el-row type="flex" v-for="(item, index) in WarningRemind" :key="index"  justify="space-between">
              <el-col :span="2">{{ index+1 }}</el-col>
              <el-col :span="6">{{ item.name }}</el-col>
              <el-col :span="8">{{ item.address }}</el-col>
              <el-col :span="6">{{ item.outNum }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <div class="person-content"  v-show="isShow">
      <div class="conter-box">
        <div class="conter-title"><span>社区人员进出统计</span> <strong @click="openTable">详情</strong></div>
        <div class="conter-detail shequjinchu">
          <div class="shequjinchu-left">
            <p>
              <img src="../../assets/person/ren_icon.png"/>
              <span>
                <strong>本月累计访问数</strong>
                <i>134</i>
              </span>
            </p>
            <p>
              <img src="../../assets/person/ren_icon.png"/>
              <span>
                <strong>今日访问客数</strong>
                <i>56</i>
              </span>
            </p>
          </div>
          <div class="shequjinchu-right">
            <p>访客排名</p>
            <ul class="ul-table-jingchu">
              <li>
                <span>排名</span>
                <span>房间号</span>
                <span>房屋地址</span>
                <span>访客次数</span>
              </li>
              <li v-for="(item, index) in visitorRanking" :key="index">
                <span>{{ index+1 }}</span>
                <span>{{ item.roomNo }}</span>
                <span>{{ item.roomAddress }}</span>
                <span>{{ item.time }}</span>
              </li>
              
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="person-right"  v-show="isShow">

      <div class="conter-box renkouqinkuan shequgailan">
        <div class="conter-title"><span>社区房屋概览</span></div>
        <div class="conter-detail">
          <ul >
            <li v-for="(item, index) in houseOverview" :key="index">
              <span>{{ item.name }}</span>
              <span><strong>{{ item.value }}</strong></span>
            </li>
          </ul>
        </div>
      </div>

      <div class="conter-box">
        <div class="conter-title"><span>住宅状态信息</span></div>
        <div class="conter-detail zhuzaizhuantai">
          <div class="zhuzaizhuantai-top">
            <el-select v-model="form.value" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>

            <el-select v-model="form.value1" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>

            <el-select v-model="form.value2" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>

            <el-select v-model="form.value3" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          
          </div>
          <div class="zhuzaizhuantai-content">
            <ul>
              <li v-for="(item,index) in houseRoomList" :style="{ background: colorType(item.type) }"  :key="index">
                <strong :style="{ background: colorItemType(item.type) }">{{ nameType(item.type) }}</strong><span>{{ item.No }}</span>
              </li>
            </ul>
          </div>
          <div class="zhuzaizhuantai-bottom">
            <div class="fanwudetail">
              <p>房屋详情</p>
              <ul class="zhuzaizhuantai-after">
                <li><span>房屋地址</span><strong>好景国际</strong></li>
                <li><span>住户姓名</span><strong>张某（女）</strong></li>
                <li><span>房屋属性</span><strong>自住</strong></li>
                <li><span>联系电话</span><strong>15611223344</strong></li>
              </ul>
            </div>
            <div class="zhuzaizhuantai-echart">
              <p>住宅状态占比</p>
              <div style="width:100%;height:100%" id="age"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Table @handleClose="handleClose" :dialogVisible="dialogVisible" :option="option" :tableData="tableData"/>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Table from '@/components/table.vue'
export default {
  components: {
    Table
  },
  data() {
    return {
      isShow: true,
      dialogVisible: false,
      active_index: 1,
      form: {
        value: '',
        value1: '',
        value2: '',
        value3: ''
      },
      options1: [
        { name: '好景国际', value: '1' },
        { name: '中芯花园社区', value: '2' },
        { name: '亦城名苑社区', value: '3' },
        { name: '博客雅苑小区', value: '4' },
        { name: '悦庭小区', value: '5' }
      ],
      options2: [
        { name: '1栋', value: '1' },
        { name: '2栋', value: '2' },
        { name: '3栋', value: '3' },
        { name: '4栋', value: '4' },
        { name: '5栋', value: '5' }
      ],
      options2: [
        { name: '1单元', value: '1' },
        { name: '2单元', value: '2' },
        { name: '3单元', value: '3' },
        { name: '4单元', value: '4' },
        { name: '5单元', value: '5' }
      ],
      options2: [
        { name: '全部', value: '' },
        { name: '1楼', value: '1' },
        { name: '2楼', value: '2' },
        { name: '3楼', value: '3' },
        { name: '4楼', value: '4' },
        { name: '5楼', value: '5' },
        { name: '6楼', value: '5' },
        { name: '7楼', value: '5' },
        { name: '8楼', value: '5' }
      ],
      communityAll: [ { name: '社区总人口', value: '1578' },{ name: '户籍人口', value: '346' }, { name: '活动人口', value: '657' },{ name: '外籍人口', value: '342' }  ],
      specialCrowd: [ { name: '高龄老人', value: '32' }, { name: '空巢老人', value: '15' }, { name: '残疾人', value: '22' },{ name: '退伍军人', value: '234' }, { name: '特殊人员', value: '23' },{ name: '保障人员', value: '43' } ],
      WarningRemind: [ { name: '张三', address: '好景国际3栋513室', outNum: 2},{ name: '赵珊', address: '好景国际2栋301室', outNum: 1},{ name: '江津', address: '好景国际2栋612室', outNum: 5}, { name: '孙文', address: '好景国际1栋341室', outNum: 8}, { name: '钱云', address: '好景国际7栋901室', outNum: 2} ],
      myChartAge: null,
      agetext: '',
      agesubtext: '',
      special_group: [],
      age_distribution: [{ name: '装修  15%', value: 30 }, { name: '空置  20%', value: 40 },{ name: '自住  30%', value: 60 },{ name: '出租  20%', value: 40 }, { name: '办公  5%', value: 10 },{ name: '宿舍  10%', value: 20 }],
      visitorRanking:[ { roomNo: '1202', roomAddress: '好景国际3栋513室', time: 15 }, { roomNo: '135', roomAddress: '好景国际4栋1023室', time: 9 },{ roomNo: '1352', roomAddress: '好景国际6栋312室', time: 5 } ],
      houseOverview: [ { name: '社区数量', value: 34 },{ name: '住宅栋数', value: 21 }, { name: '住户数量', value: 256 },{ name: '出租数量', value: 57 },{ name: '房屋数量', value: 567 },{ name: '公租房', value: 79 },{ name: '商住两用房', value: 59 }, { name: '今日访问客数', value: 268 } ],

      houseRoom: [ { address: '1', zxhs: 1, floor: 10, roomNo: '10', type: 1 } ],
      houseRoomList: [ 
        { No: '2001', type: '1' },{ No: '2002', type: '3' },{ No: '2003', type: '2' },{ No: '2004', type: '3' },{ No: '2015', type: '1' },
        { No: '2101', type: '2' },{ No: '2102', type: '1' },{ No: '2103', type: '3' },{ No: '2104', type: '2' },{ No: '2105', type: '3' },
        { No: '2201', type: '1' },{ No: '2202', type: '2' },{ No: '2203', type: '2' },{ No: '2204', type: '2' },{ No: '2205', type: '1' },
        { No: '2301', type: '3' },{ No: '2302', type: '3' },{ No: '2303', type: '1' },{ No: '2404', type: '3' },{ No: '2405', type: '3' },
       ],
       option: [
         { prop: 'name', label: '姓名' },
         { prop: 'type', label: '住户类型' },
         { prop: 'address', label: '所属小区' },
         { prop: 'xiaoqu', label: '所属小区' },
         { prop: 'menjin', label: '门禁名称' },
         { prop: 'date', label: '时间' },
         { prop: 'chuxin', label: '出行性质' },
         { prop: 'image', label: '抓拍照片' },
         { prop: 'video', label: '视频' },
       ],
       tableData: [
         { name: '李*',type: '业主', xiaoqu: '好景国际', address: '好景国际5栋1121室', menjin: '好景-南门',date: '2021-12-06',chuxin: '进', image: '',video: '' },
         { name: '张*',type: '业主', xiaoqu: '好景国际', address: '好景国际5栋1121室', menjin: '好景-南门',date: '2021-12-06',chuxin: '进', image: '',video: '' },
         { name: '王*',type: '业主', xiaoqu: '好景国际', address: '好景国际5栋1121室', menjin: '好景-南门',date: '2021-12-06',chuxin: '进', image: '',video: '' },
         { name: '李*',type: '业主', xiaoqu: '好景国际', address: '好景国际5栋1121室', menjin: '好景-南门',date: '2021-12-06',chuxin: '进', image: '',video: '' },
         { name: '画**',type: '业主', xiaoqu: '好景国际', address: '好景国际5栋1121室', menjin: '好景-南门',date: '2021-12-06',chuxin: '进', image: '',video: '' }
       ]
    };
  },
  computed: {
    ageOption() {
      let that = this;
      return {
        color: ["#009122", "#00ff90", "#f3b834", "#48c7ff"],
        title: {
          text: that.agetext,
          subtext: that.agesubtext,
          textAlign: "center",
          x: "68%",
          y: "35%",
          textStyle: {
            color: "#fff",
            fontSize: 10,
            fontWeight: "bolder",
          },
          subtextStyle: {
            color: "#00fb8e",
            fontSize: 10,
            fontWeight: "bolder",
          },
        },
        legend: {
          orient: "vertical",
          left: "10%",
          top: "center",
          align: "left",
          itemWidth: 12,
          itemHeight: 8,
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: 0,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["45%", "60%"],
            center: ["70%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "10",
              },
            },
            labelLine: {
              show: false,
            },
            data: that.age_distribution
          },
        ],
      };

    },
  },
  mounted() {
    let that = this
    this.myChartAge = echarts.init(document.getElementById("age"));
    that.agetext = this.age_distribution[0].name
    that.agesubtext = this.age_distribution[0].value
    this.myChartAge.setOption(that.ageOption);
    this.myChartAge.off("click");
    this.myChartAge.on("click", function (params) {
      that.agetext = params.name;
      that.agesubtext = params.value;
      that.myChartAge.setOption(that.ageOption);
    });
  },
  methods: {
    colorType(type) {
      switch(type) {
        case '1': 
          return '#8B8FFF'
        case '2': 
          return '#09E083'
        case '3': 
          return '#0089FF'
        case '4': 
          return '#6FE9FF'
        case '5': 
          return '#0089FF'
      }
    },
    colorItemType(type) {
      switch(type) {
        case '1': 
          return '#FFCD5C'
        case '2': 
          return '#F24466'
        case '3': 
          return '#F28BFF'
        case '4': 
          return '#F24466'
        case '5': 
          return '#F28BFF'
      }
    },
    
    nameType(type) {
      switch(type) {
        case '1': 
          return '退伍'
        case '2': 
          return '扶持'
        case '3': 
          return '空巢'
        case '4': 
          return '12'
        case '5': 
          return '空巢'
      }
    },
    handleClose() {
      this.isShow = true;
      this.dialogVisible = false
    },
    openTable() {
      this.isShow = false;
      this.dialogVisible = true
    }
  }
};
</script>

<style lang="scss" scoped>
@import url('../../style/public.scss');
.person-room {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.5rem 0;
  box-sizing: border-box;
  .person-left {
    display: flex;
    flex-direction: column;
    width: 5rem;
  }
  .person-content {
    position: absolute;
    left: 50%;
    margin-left: -3.5rem;
    bottom: 0rem;
    width: 7rem;
  }
  .person-right {
    display: flex;
    flex-direction: column;
    width: 5rem;
  }
}
.person-room {
  color: #fff;
}
.teshurenqun {
  position: relative;
  font-size: 0.2rem;
  &::after {
    content: '';
    position: absolute;
    width: 1.8rem;
    height: 3px;
    left: 0;
    top: 0.1rem;
    background: url('../../assets/person/xiao_title.png') no-repeat;
  }
  &::before {
    content: '';
    position: absolute;
    width: 1.8rem;
    height: 3px;
    right: 0;
    top: 0.1rem;
    transform: rotate(180deg);
    background: url('../../assets/person/xiao_title.png') no-repeat;
  }
}
.danyuanzhiyuanzhe {
  position: relative;
  font-size: 0.2rem;
  margin: 0.2rem 0;
  &::after {
    content: '';
    position: absolute;
    width: 0.3rem;
    height: 3px;
    left: 0;
    top: 0.1rem;
    background: url('../../assets/person/xiao_title.png') no-repeat;
  }
  &::before {
    content: '';
    position: absolute;
    width: 0.3rem;
    height: 3px;
    right: 0;
    top: 0.1rem;
    transform: rotate(180deg);
    background: url('../../assets/person/xiao_title.png') no-repeat;
  }
}
.ertong {
  position: relative;
  font-size: 0.2rem;
  margin: 0.2rem 0;
  &::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 3px;
    left: 0.1rem;
    top: 0.1rem;
    background: url('../../assets/person/xiao_title.png') no-repeat;
  }
  &::before {
    content: '';
    position: absolute;
    width: 1rem;
    height: 3px;
    right: 0;
    top: 0.1rem;
    transform: rotate(180deg);
    background: url('../../assets/person/xiao_title.png') no-repeat;
  }
}
.renkouqinkuan {
  display: flex;
  flex-direction: column;
  ul {
    min-height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.15rem;
    box-sizing: border-box;
    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      span {
        font-size: 0.18rem;
        font-weight: 500;
        strong {
          color: #00fe90;
          font-size: 0.4rem;
          font-weight: 400;
        }
      }
    }
  }
  .special {
    width: 100%;
    p {
      text-align: center;
    }
    ul {
      li {
        span {
          font-size: 0.14rem;
          font-weight: 500;
          strong {
            color: #6fe9ff;
            font-size: 0.3rem;
          }
        }
      }
    }
  }
  .other-person {
    width: 100%;
    display: flex;
    p {
      text-align: center;
    }
    .party {
      width: 50%;
      span {
        font-size: 0.16rem;
      }
    }
    .children {
      width: 50%;
      span {
        font-size: 0.16rem;
      }
    }
  }
}
.shequgailan {
  margin-bottom: 0.1rem;
  display: flex;
  ul {
    height: 2.5rem;
    flex-wrap: wrap;
    li {
      width: 25%;
      margin: 0.15rem 0;
    }
  }
}
.yujingtixing {
  p {
    display: flex;
    span {
      display: inline-block;
      width: 0.8rem;
      height: 0.25rem;
      text-align: center;
      line-height: 0.25rem;
      
      background: url("../../assets/person/bar_btn_off.png") no-repeat;
      background-size: 100% 100%;
      margin-left: 0.1rem;
      font-size: 0.15rem;
    }
    .active {
      display: inline-block;
      width: 0.8rem;
      height: 0.25rem;
      text-align: center;
      line-height: 0.25rem;
      background: url("../../assets/person/bar_btn_active.png") no-repeat;
      background-size: 100% 100%;
      margin-left: 0.1rem;
      font-size: 0.15rem;
    }
  }
  .ul-table {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-top: 0.2rem;
    li {
      display: flex;
      line-height: 0.5rem;
      span {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 0.15rem;
        &:nth-child(1) {
          width: 0.4rem;
        }
        &:nth-child(2) {
          width: 0.6rem;
        }
        &:nth-child(3) {
          flex: 1;
        }
        &:nth-child(4) {
          width: 0.6rem;
        }
      }
      &:nth-child(even) span{
        background: #224853;
      }
      &:nth-child(odd) span{
        background: #112530;
      }
    }
    :nth-child(1) span {
      background: rgba(73, 75, 75, 0.55);
    }
  }
}
.shequjinchu {
    display: flex;
    height: 1.8rem;
    box-sizing: border-box;
    padding: 0.15rem;
    .shequjinchu-left {
      display: flex;
      flex-direction: column;
      width: 2rem;
      justify-content: space-between;
      p {
        display: flex;
        
        img {
          width: 0.5rem;
          height: 0.5rem;
        }
        span {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 0.15rem;
          color: #00fe90;
          font-size: 0.25rem;
          strong {
            color: #fff;
            font-size: 0.16rem;
          }
          i {
            font-size: 0.25rem;
            font-style: normal;
          }
        }
      }
      
    }
    .shequjinchu-right {
      margin-left: 0.15rem;
      display: flex;
      flex: 1;
      flex-direction: column;
      .ul-table-jingchu {
        display: flex;
        width: 100%;
        flex-direction: column;
        li {
          display: flex;
          width: 100%;
          line-height: 0.3rem;
          span {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
            font-size: 0.15rem;
            &:nth-child(1) {
              width: 0.4rem;
            }
            &:nth-child(2) {
              width: 0.8rem;
            }
            &:nth-child(3) {
              flex: 1;
            }
            &:nth-child(4) {
              width: 0.8rem;
            }
          }
        }
      }
    }
  }

.zhuzaizhuantai {
  display: flex;
  flex-direction: column;
  width: 100%;
  .zhuzaizhuantai-content {
    width: 100%;
    margin-top: 0.15rem;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 0.75rem;
        height: 0.3rem;
        margin: 0 0.1rem;
        line-height: 0.4rem;
        margin-bottom: 0.05rem;
        background: #000;
        border-radius: 0.02rem;
        font-size: 0.12rem;
        strong {
          font-weight: 400;
          padding: 0 0.01rem;
          border-radius: 0.08rem;
          height: 0.180rem;
          line-height: 0.180rem;
          font-size: 0.11rem;
          background: #999;
        }
      }
    }
  }
  .zhuzaizhuantai-bottom {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0.15rem 0.15rem 0 0.15rem;
    position: relative;
    box-sizing: border-box;
    .zhuzaizhuantai-after {
      border: 1px solid #fff;
      border-radius: 0.03rem;
      padding: 0.1rem 0;
    }
    .zhuzaizhuantai-after::after {
      content: '';
      position: absolute;
      width: 1px;
      height: 100%;
      left: 0;
      top: 0;
      background: #fff;
    }
    .fanwudetail {
      position: relative;
      width: 50%;
      ul {
        padding-left: 0.15rem;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        margin-top: 0.15rem;
        li {
          display: flex;
          span {
            display: inline-block;
            width: 1rem;
            font-size: 0.15rem;
            color: #E7ECED;
          }
          strong {
            font-size: 0.16rem;
            font-weight: 400;
          }
        }
      }
    }
  }
  .zhuzaizhuantai-echart {
    width: 50%;
    height: 1.5rem;
  }
}
/deep/.el-select {
  width: 1rem;
  margin-left: 0.1rem;
}
/deep/.el-input--suffix .el-input__inner {
  background: transparent;
  color: #fff;
}
/deep/.el-popper {
  z-index: 10000;
}
.conter-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #071726bd;
  padding: 0.12rem;
  border-radius: 0.05rem;
  box-sizing: border-box;
  margin-bottom: 0.1rem;
  .conter-title {
    position: relative;
    color: #fff;
    font-size: 0.24rem;
    height: 0.4rem;
    display: flex;
    justify-content: space-between;
    strong {
      font-size: 0.2rem;
      font-weight: 400;
    }
    &::after {
      position: absolute;
      bottom: -0.1rem;
      left: 0;
      height: 0.1rem;
      width: 100%;
      content: "";
      display: inline-block;
      background: url("../../assets/person/title_bottom.png") no-repeat;
      background-size: 100% 100%;
    }
    span {
      display: inline-block;
      position: relative;
      text-indent: 0.24rem;
      &::after {
        position: absolute;
        top: 0.05rem;
        left: 0;
        content: "";
        display: inline-block;
        width: 0.14rem;
        height: 0.14rem;
        border: 0.02rem solid #65beff;
        border-radius: 50%;
        opacity: 1;
      }
    }
  }
  .conter-detail {
    position: relative;
    width: 100%;
    margin-top: 0.2rem;
    
  }
}
/deep/.el-select-dropdown {
  z-index: 1000000 !important;
}
</style>